<template>
  <div v-show="active" class="mask-view w-screen h-screen cursor-pointer center~"
       @click="onShutDown">
    <div class="card bg-light-50 rounded cursor-default"
         @click="e => e.stopPropagation()">
      <div class="header center~ w-full p-10px box-border border-b border-gray-300">
        <div class="">新建文件</div>
        <div class="btn flex center~">
          <close-label-button @click="onShutDown"/>
        </div>
      </div>
      <div class="p-10px box-border flex flex-col items-center">
        <div class="w-full mb-10px">
          <div class="w-200px">
            <prefix-input prefix="文件名" placeholder="请输入文件名" v-model:value="fileTitle"/>
          </div>
        </div>
        <div class="flex-1">
          <mark-down v-model="fileContent" :toolbars="TOOLBARS"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import PrefixInput from "@/components/customInput/PrefixInput.vue";
import CloseLabelButton from "@/components/customButton/CloseLabelButton.vue";
import MarkDown from "md-editor-v3"
import 'md-editor-v3/lib/style.css';
import {TOOLBARS} from "@/config"

interface Props {
  active?: boolean
}

const emits = defineEmits(["update:active"])
const rawProps = withDefaults(defineProps<Props>(), {
  active: false
})
const {active} = toRefs(rawProps)
const fileTitle = ref("")
const fileContent = ref("")

function onShutDown() {
  emits("update:active", false)
}
</script>

<style scoped>
.mask-view {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.card {
  width: fit-content;
  height: fit-content;
}

.header {
  position: relative;
}

.btn {
  position: absolute;
  left: 10px;
}
</style>